<template>
  <div class="app-container">
    <el-row :gutter="100" style="width:100%;margin-top:100px">
      <el-col :span="10" :xs="24" style="margin-left:6.3%;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <userAvatar :user="user" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <div class="pull-left">账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</div>
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
                <div class="pull-left">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</div>
                <div class="pull-right">{{ user.nickName }}</div>
              </li>
              <li class="list-group-item">
                <div class="pull-left">员工编号</div>
                <div class="pull-right">{{ user.jobNo }}</div>
              </li>
              <li class="list-group-item">
                <div class="pull-left">手机号码</div>
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <!-- <li class="list-group-item">
                用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>-->
              <li class="list-group-item">
                <div class="pull-left">所属部门</div>
                <div class="pull-right">{{ user.personnelDept }}</div>
              </li>
              <li class="list-group-item">
                <div class="pull-left">创建日期</div>
                <div class="pull-right">{{user.createTime}}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10" :xs="24">
        <div class="tagTitle">
          <div
            class="tagUserinfo"
            :class="{actived:activeTab==='userinfo'}"
            @click="changeTag('userinfo')"
          >修改手机号</div>
          <div :class="{actived:activeTab==='resetPwd'}" @click="changeTag('resetPwd')">修改密码</div>
        </div>
        <el-card>
          <!-- <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>-->
          <userInfo :user="user" v-if="activeTab==='userinfo'" @updateInfo="updateInfo" />
          <resetPwd v-else :user="user" />
          <!-- <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo"></el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd :user="user" />
            </el-tab-pane>
          </el-tabs>-->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd },
  data () {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo"
    };
  },
  created () {
    this.getUser();
  },
  methods: {
    updateInfo () {
      this.getUser()
    },
    getUser () {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    changeTag (type) {
      this.activeTab = type
    }
  }
};
</script>
<style lang="scss" scoped>
.el-card.is-always-shadow {
  box-shadow: 0 3px 10px 2px rgba(198, 198, 198, 0.35);
  height: 600px;
}
.el-card {
  // margin-left: 54px;
  // margin-right: 54px;
  /deep/.el-card__header {
    padding: 18px 0 18px 20px;
    height: 58px;
    .clearfix {
      span {
        font-family: Microsoft YaHei;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        letter-spacing: 0;
      }
    }
  }
  /deep/.el-card__body {
    padding: 24px 24px 40px 24px;
    .list-group {
      margin-top: 30px;
      padding-left: 50px;
      padding-right: 50px;
      .list-group-item {
        padding: 16px 0;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        display: flex;
        .pull-left {
          width: 40%;
          text-align: right;
        }
        .pull-right {
          width: 40%;
          text-align: left;
          margin-left: 30%;
          font-family: Microsoft YaHei;
        }
      }
    }
  }
}

.tagTitle {
  display: flex;
  margin: -59px 0 16px 0px;
  font-family: PingFangSC-Regular;
  font-size: 22px;
  letter-spacing: 0;
  .tagUserinfo {
    width: 120px;
    margin-right: 43px;
  }
  div {
    cursor: pointer;
    padding: 0 3px 14px 3px;
  }
  .actived {
    border-bottom: 4px solid #1890ff;
    color: #1890ff;

    font-family: Microsoft YaHei;
  }
}
</style>
